<template>
  <div class="bottombar">
    <div class="cal">
     <div class="checkbox">
      <input type="checkbox" @click='btnchecked' :checked='ischecked'  class="check">
      <span>全选</span>
     </div>
     <div class="total">合计: ￥{{totalPrice}}</div>
     <div class="final" @click="calcbtn">结算({{totalcount}})</div>
    </div>
  </div>
</template>

<script>
import {mapGetters} from 'vuex'
export default {
  name:'catsbottombar',
     computed: {
        ...mapGetters(['catlist']),
        totalcount(){
        return this.catlist.filter(item =>item.chekbox).reduce((previous,item)=>previous + item.count,0)
        },
        totalPrice(){
       return this.catlist.filter(item =>item.chekbox).reduce((previous,item)=>previous + item.count*item.lowNowPrice,0).toFixed(2)
      },
      ischecked(){
        //第一种方法
        if(this.catlist.length==0) return this.catlist.chekbox=false
        return !this.catlist.find(item =>!item.chekbox)
         //第二种方法
        //  if(this.catlist.length==0) return this.catlist.chekbox=false
        //  return !(this.catlist.filter(item=>!item.chekbox).length)
      }
     },
     methods: {
       btnchecked(){
         
         if(this.ischecked){
           this.catlist.forEach(item=>item.chekbox=false)
         }else{
           this.catlist.forEach(item=>item.chekbox=true)
         }
       },
       calcbtn(){
         if(this.catlist.filter(item=>item.chekbox).length==0){
           this.$toast.show('请选择你要购买的商品！',3000)
           
         }else if(this.catlist.filter(item=>item.chekbox).length !==0){
           this.$toast.show('成功购买',3000)
           
         }
       }
     }
    
}
</script>

<style scoped>
  .bottombar{
    width: 100vw;
    height: 40px;
    background-color:rgb(192,192,192);
    position: fixed;
    bottom: 44px;
    z-index: 9;
    border-top: 1px solid black;
  }
   .check{
		width: 18px;
		height: 18px;
		overflow: hidden; 
		 border-radius: 100%;
		border: 1px solid black;
    margin-right: 5px;
    position: relative;
    top: 2px;
    		/* normal		 */
  }
  .check:checked {
			background: url(~assets/img/detail/check_active.png) no-repeat center;
			background-size: cover;}
  .cal{
    margin-left: 10px;
    display: flex;
    align-items: center;
    line-height: 40px;
  }
  .checkbox{
    width: 20vw;
  }
  .total{
    width: 55vw;
  }
  .final{
    color: white;
    text-align: center;
    background-color: red;
    width: 25vw;
    font-weight: bold;
  }
</style>